import React, { Component } from "react";
import Home from "./Home";
import List from "./List";
import About from "./About";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import Shoppingcar from './Shoppingcar'
import './css/#app.css'
import FenYe from "./FenYe";
export default class App extends Component {

    // constructor(){
    //     super();
    //     this.state={
    //         index:1,
    //         com:Home,
    //         arr:[{id:1,msg:'首页',com:Home},{id:2,msg:'列表',com:About},{id:3,msg:'关于',com:List}]
    //     }
    // }
    // setdate(item){
    //     this.setState({
    //         index:item.id,
    //         com:item.com
    //     })
    // }
    // render(){
    //     let View = this.state.com
    //     return(
    //         <React.Fragment>
    //             <div className="menu">
    //             {this.state.arr.map(item=><div 
    //             className={item.id===this.state.index?"item active":"item"}
    //             key={item.id}
    //             onClick={()=>{this.setdate(item)}}
    //             >{item.msg}</div>)}
    //             </div>
    //             <View></View>
    //         </React.Fragment>
    //     )
    // }
  constructor() {
    super();
    this.state = {
        com:Home,
        index:1,
        arr:[{id:1,msg:'首页',com:Home},{id:2,msg:'列表',com:About},
        {id:3,msg:'关于',com:List},{id:4,msg:'列表',com:Page1},
        {id:5,msg:'列表',com:Page2},{id:6,msg:'列表',com:Page3},
        {id:7,msg:'组件分离购物车',com:Shoppingcar},
        {id:8,msg:'分页',com:FenYe},
    ]
    };
  }
  getdate(item){
    this.setState({
        index:item.id,
        com:item.com
    })
  }
  render() {
    let View = this.state.com
    let newarr = this.state.arr.map(item=><div className={this.state.index===item.id?'item active':"item"} key={item.id} 
    onClick={()=>{this.getdate(item)}}>{item.msg}</div>)
    return (
      <div>
       <div className="menu">
            {newarr}
       </div>
        <View></View>
      </div>
    );
  }

}
